import React, { Component, useEffect, useState } from 'react';
import MainLayout from "@component/mainLayout/mainLayout";
import Banner from "@/views/viewCommon/Banner";
import { ListView, Toast, Modal } from 'antd-mobile';
import * as ReactDOM from "react-dom";
import './index.scss';
import { InterfaceG } from "@config/Config";
import yhTools from "@/tools/yh";
import ic_zwjl from '@images/imageXHB/guide/ic_zwjl@2x.png';

class RechargeRecord extends Component {
  constructor(props, ...args) {
    super(props, ...args);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    });
    this.state = {
      recharge: false,
      rechargeAmount: '0.00',
      bannerList: [],
      data: [], //{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 },
      dataSource: dataSource,
      hasMore: false,
      isLoading: false,
      height: (document.documentElement.clientHeight * 3) / 4,
      loadStatus: "",
      ruleModal: false
    };
    this.pageIndex = 1;
  }

  componentDidMount() {
    this.getReacordData();
    this.getBannerList();
  }

  handleSeeRule = () => {
    this.setState({ ruleModal: true });
  }

  getBannerList = () => {
    let objs = {
      url: InterfaceG.getBannerListByPageType,
      params: {
        pageType: "xhbRechargeDetailPage"
      },
      _alertShow: false
    };
    Toast.loading("加载中...");
    let _that = this;
    yhTools.request(objs).then(res => {
      Toast.hide();
      if (res.code === "0") {
        let list = [];
        if (res.data && res.data.length > 0) {
          res.data.forEach(item => {
            if (item.bannerType == "xhbRechargeDetailTopBanner") {
              list = item.indexServerDtos;
            }
          });
        }
        _that.setState({
          bannerList: list,
        });
      } else {
        Toast.info(res.message, 2);
      }
    });
  };

  getReacordData() {
    const hei =
      document.documentElement.clientHeight -
      ReactDOM.findDOMNode(this.lv).parentNode.offsetTop - 77;

    let objs = {
      url: InterfaceG.xhbRechargeDetail,
      params: {
        pageNum: String(this.pageIndex++),
        pageSize: "20"
      }
    };
    this.setState({
      isLoading: true
    });
    yhTools.request(objs).then(res => {
      if (res.code === "0") {
        this.setState({
          recharge: res.data.recharge,
          rechargeAmount: res.data.rechargeAmount
        })
        if (res.data.xhbRechargeDetailVoList.length > 0) {
          let data = [...this.state.data];
          data = data.concat(res.data.xhbRechargeDetailVoList);
          this.setState({
            data: data,
            height: hei
          });
        } else {
          this.setState({
            loadStatus: "2"
          });
        }
      }
      this.setState({
        isLoading: false,
        hasMore: false
      });
    });
  }

  onEndReached = () => {
    if (this.state.isLoading || (this.pageIndex === 1 && !this.state.hasMore)) {
      return;
    }
    this.setState({ isLoading: true });
    let objs = {
      url: InterfaceG.xhbRechargeDetail,
      params: {
        pageNum: String(this.pageIndex++),
        pageSize: "20"
      }
    };
    this.setState({
      hasMore: true,
      isLoading: true
    });
    yhTools.request(objs).then(res => {
      if (res.code === "0") {
        if (res.data.xhbRechargeDetailVoList.length > 0) {
          let data = [...this.state.data];
          data = data.concat(res.data.xhbRechargeDetailVoList);
          this.setState({
            data: data
          });
        }
        this.setState({
          hasMore: false,
          isLoading: false
        });
      }
    });
  };
  //0成功 1失败 4充值中

  row = rowData => {
    return (
      <div className="row">
        <div className="row-top">
          <span className="title">【永辉生活】APP账户充值</span>
          <span className="amt">{rowData.realAmount}</span>
        </div>
        <div className="row-buttom">
          <span className="time">{rowData.tradeDate}</span>
          <span className="type" style={{ color: rowData.orderStatus == '0' ? '#999999' : rowData.orderStatus == '1' ? '#F82633' : rowData.orderStatus == '4' ? '#999999' : '#999999' }}>{rowData.orderStatus == '0' ? '充值成功' : rowData.orderStatus == '1' ? '充值失败' : rowData.orderStatus == '4' ? '充值中' : ''}</span>
        </div>
      </div>
    );
  };

  render() {
    const pageParams = {
      header: {
        title: "充值明细",
        headerBackground: '#ffffff',
        titleColor: '#302E2F',
        rightButt: '规则',
        rightButtColor: '#302E2F',
        rightButtCallBack: this.handleSeeRule,
        newBackButt: true,
      },
      cacheLifecycles: this.props.cacheLifecycles,
      history: this.props.history
    };
    return (
      <MainLayout pageParams={pageParams} useScroll={false}>
        <div className="recharge-record-page">
          <Banner bannerList={this.state.bannerList} history={this.props.history} />
          <div className="data-box" style={{ height: this.state.data.length > 0 ? this.state.height : 0 }}>
            {this.state.recharge && (
              <div className="amount-echarged">
                <span className="title">待充值金额(元)：</span>
                <span className="amt">{this.state.rechargeAmount}</span>
              </div>
            )}
            <ListView
              ref={el => (this.lv = el)}
              dataSource={this.state.dataSource.cloneWithRows(this.state.data)}
              renderFooter={() => (
                <div className="record_listview_foot">
                  {this.state.isLoading ? "加载中" : !this.state.hasMore ? '没有更多了' : ''}
                </div>
              )}
              renderRow={this.row}
              style={{
                height: this.state.data.length > 0 ? this.state.height : 0,
                overflow: "auto"
              }}
              initialListSize={20}
              onEndReached={this.onEndReached}
            />
            {this.state.data.length == 0 && (
              <div
                className="empty"
                style={{
                  height: this.state.data.length > 0 ? this.state.height : 0
                }}>
                <img src={ic_zwjl} alt="" />
                <span>暂无记录</span>
              </div>
            )}
          </div>
        </div>
        <Modal
          className="rule-modal"
          visible={this.state.ruleModal}
          transparent
          maskClosable={false}
          footer={[{ text: '知道了', onPress: () => { this.setState({ ruleModal: false }) } }]}
          onClose={() => { this.setState({ ruleModal: false }) }}
        >
          <p className="content">【永辉生活】APP单个账户余额上限5000元（含），若充值后的账户余额≤5000元时则由系统在金额达标后自动充值，充值结果次日反馈。若充值后的账户余额>5000元时请先及时消费，否则会导致充值失败。</p>
        </Modal>
      </MainLayout>
    );
  }
}

export default RechargeRecord;

